<template>
  <div class="home">
    <todo-input @click="paretadd"></todo-input>
    <!-- @eit="hideInp" 编辑子传父函数 -->
    <todo-list :dataList="list" @del="delect"  ></todo-list>
  </div>
</template>
<script>
import todoInput from '../components/todoInput.vue'
import todoList from '../components/todoList.vue'
export default {
  components:{
    todoInput,
    todoList
  },
  name: "Home",
  data(){
    return {
      list:[
        // {msg:'中午要吃饭',flag:false}
      ], // 存储任务的数组 flag:false 表示正在进行
    } 
  },
  created() {
    this.list = JSON.parse(localStorage.getItem('list')) || [];
  },
  methods: {
    paretadd(val){
      // 下面是生成一个随机的id
      const RandomId = len => Math.random().toString(36).substr(3, len);
      // eit:false 控制是否编辑的
      this.list.push({msg:val,flag:false,id:RandomId(10),eit:false});
    },
    delect(val){ // 删除的事件
      // findIndex 查找数组中元素的下标
      let index = this.list.findIndex(item => item.id == val);
      this.list.splice(index,1);
    },

    
    // update(id){ // 双击显示input事件
    //  let index = this.list.findIndex(item => item.id == id);
    //  this.list[index].eit = true;
    // },


    // hideInp(val){  // 隐藏input框事件
    // // console.log(val);
    //  let index = this.list.findIndex(item => item.id == val.id);
    //  console.log(index);
    //  if (val.boolVal == 'span'){
    //    this.list[index].eit = true
    //  } else {
    //    this.list[index].eit = false
    //  }
    // //  this.list[index].eit = val.boolVal;
    // }
  },
};
</script>
<style lang="scss" scoped>

</style>